<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button type="primary" style="float: right;" size="small" @click="showAdd">添加</el-button>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            :header-cell-style="{ background: '#f5f5f5' }"
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="taskId"
            border
            height="680px"
            default-expand-all
            :tree-props="{
              children: 'tasks',
              hasChildren: 'hasChildren'
            }"
          >
            <el-table-column prop="year" label="配合单位区域">
              <template slot-scope="scope">
                <div>配合单位数量 {{ scope.row.gt }} ~ {{ scope.row.le }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="before" label="表扬前N位"></el-table-column>
            <el-table-column align="center" prop="after" label="警告后N位"></el-table-column>
            <el-table-column align="center" fixed="right" width="300" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="dataRemove(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
    </el-card>
    <el-dialog
      style="width:50%;margin-left:22%"
      title="评分亮灯配置"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="closeDialog"
    >
      <el-form
        :model="formInline"
        ref="formInline"
        label-width="140px"
        class="demo-ruleForm"
        center
      >
        <el-form-item
          label="大于等于："
          prop="gt"
          :rules="[
            { required: true, message: '不能为空' },
            { type: 'number', message: '必须为数字值' }
          ]"
        >
          <el-input
            class="userIntSize"
            type="age"
            v-model.number="formInline.gt"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="小于等于："
          prop="le"
          :rules="[
            { required: true, message: '不能为空' },
            { type: 'number', message: '必须为数字值' }
          ]"
        >
          <el-input
            class="userIntSize"
            type="age"
            v-model.number="formInline.le"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="前几位表扬："
          prop="before"
          :rules="[
            { required: true, message: '不能为空' },
            { type: 'number', message: '必须为数字值' }
          ]"
        >
          <el-input
            class="userIntSize"
            type="age"
            v-model.number="formInline.before"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="后几位警告："
          prop="after"
          :rules="[
            { required: true, message: '不能为空' },
            { type: 'number', message: '必须为数字值' }
          ]"
        >
          <el-input
            class="userIntSize"
            type="age"
            v-model.number="formInline.after"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="saveBtn" type="primary" @click="submitForm('formInline')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formInline: {
        taskId: "",
        before: "",
        after: "",
        gt: "",
        le: "",
      },
      isStr: true,
    };
  },
  mounted() {
    this.getListByPage();
  },
  methods: {
    // 删除
    dataRemove(row) {
      console.log(row);
      let _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("/caveatConf/remove", { id: row.id }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.getListByPage();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getListByPage() {
      this.$axios
        .post("/caveatConf/getList")
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            console.log("9999", this.tableData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addMission(data) {
      this.dialogVisible = true;
      console.log(data);
      this.formInline.taskId = data.taskId;
      this.formInline.topnum = data.before;
      this.formInline.bottomnum = data.after;
      if (data.before == null || data.after == null) {
        this.isStr = false;
      }
    },
    closeDialog() {
      this.formInline = {
        taskId: "",
        before: "",
        after: "",
        gt: "",
        le: "",
      };
    },
    showAdd() {
      this.dialogVisible = true;
      this.formInline = {
        taskId: "",
        before: "",
        after: "",
        gt: "",
        le: "",
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this.formInline;
          let obj = {
            before: _this.before, //前几位
            after: _this.after, // 后几位
            gt: _this.gt, //大于
            le: _this.le, //小于
          };
          if (this.isStr) {
            //新增
            this.$axios.post("/caveatConf/add", obj, 2).then((res) => {
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.getListByPage();
                this.dialogVisible = false;
              }
            });
          } else {
            //修改
            this.$axios.post("/caveatConf/update", obj).then((res) => {
              if (res.code == 200) {
                this.$message.success("保存成功");
                this.getListByPage();
                this.dialogVisible = false;
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.userIntSize {
  width: 80%;
}
.saveBtn {
  width: 55%;
  margin-left: 10%;
}
</style>
